<script setup lang="ts">
import { ChatOllama } from '@langchain/ollama'
import { ref } from 'vue'
import { ChatPromptTemplate } from '@langchain/core/prompts'

const llm = new ChatOllama({
  model: 'llama3:8b',
  temperature: 0,
  maxRetries: 2,
})

const messageMode = ref({
  sending: false,
  response: '',
})

const promptMode = ref({
  sending: false,
  response: '',
})

async function clickSendMessage() {
  messageMode.value.sending = true
  const aiMsg = await llm.invoke([
    [
      'system',
      'You are a helpful assistant that translates English to French. Translate the user sentence.',
    ],
    ['human', 'I love programming.'],
  ])
  messageMode.value.response = JSON.stringify(aiMsg)
  messageMode.value.sending = false
}

async function clickSendPrompt() {
  promptMode.value.sending = true

  const prompt = ChatPromptTemplate.fromMessages([
    [
      'system',
      'You are a helpful assistant that translates {input_language} to {output_language}.',
    ],
    ['human', '{input}'],
  ])

  const chain = prompt.pipe(llm)
  const aiMsg = await chain.invoke({
    input_language: 'English',
    output_language: 'German',
    input: 'I love programming.',
  })

  promptMode.value.response = JSON.stringify(aiMsg)
  promptMode.value.sending = false
}
</script>
<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-button @click="clickSendMessage" class="mb-3" :loading="messageMode.sending">
          send message
        </el-button>

        <el-card style="max-width: 480px">
          {{ messageMode.response }}
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-button @click="clickSendPrompt" class="mb-3" :loading="promptMode.sending">
          send prompt
        </el-button>

        <el-card style="max-width: 480px">
          {{ promptMode.response }}
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped></style>
